<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台管理系统</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>
    <table id="test" lay-filter="test"></table>
    <script src="../js/jquery-1.12.4.js"></script>
    <script src="../layui/layui.all.js"></script>
   <!-- <script src="../layui/layui.js"></script>-->
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-normal layui-btn-lg" id="add">新增用户</button>
        <button class="layui-btn layui-btn-danger layui-btn-lg" lay-event="delAll">删除用户</button>
    </div>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>


    <script>
        layui.use('table', function(){
            var table = layui.table;

            //第一个实例
            var tableIns=table.render({
                elem: '#test'
                ,height: 312
                ,url: 'selectinfo' //数据接口
                ,page: true //开启分页
                ,cols: [[ //表头
                    {type: 'checkbox', fixed: 'left'}
                    ,{field: 'id', title: 'ID', width:100, sort: true, fixed: 'left'}
                    ,{field: 'username', title: '用户名', width:100}
                    ,{field: 'password', title: '密码', width:100, sort: true}
                    ,{field: 'address', title: '地址', width:177}
                    ,{field: 'createby', title: '创建者', width: 177}
                    ,{field: 'createdate', title: '创建日期', width: 177, sort: true}
                    ,{field:'', title:'操作',toolbar: '#barDemo'}
                ]]
            });
            table.on('tool(test)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                if(obj.event === 'detail'){ //查看
                    //do somehing
                    $("#div1").show();
                    $.ajax({
                        "url":"selectinfo",
                        "type":"get",
                        "data":{id:data.id},
                        "dataType":"json",
                        "success":function (data) {
                            $("#id").val(data.id);
                            $("#username").val(data.username);
                            $("#password").val(data.password);
                            $("#address").val(data.address);
                            $("#createby").val(data.createby);
                            $("#createdate").val(data.createdate);
                            $("input").attr("readonly",true);
                            $("#btn").hide();
                        }
                    })
                } else if(obj.event === 'del'){ //删除
                    layer.confirm('确定要删除该用户吗', function(index){
                       /* obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                        layer.close(index);*/
                        //向服务端发送删除指令
                        $.ajax({
                            "url":"deleteUserInfoById",
                            "type":"get",
                            "data":{id:data.id},
                            "dataType":"json",
                            "success":function (data) {
                                if(data=="1"){
                                    layer.msg('删除成功', {
                                        icon: 1,//提示的样式
                                        time: 1000, //2秒关闭（如果不配置，默认是3秒）//设置后不需要自己写定时关闭了，单位是毫秒
                                        end: function () {
                                            tableIns.reload({
                                                page: {
                                                    curr: 1 //重新从第 1 页开始
                                                }
                                            });
                                        }
                                    });
                                }else{
                                    layer.msg('删除失败', {
                                        icon: 2,//提示的样式
                                        time: 1000, //2秒关闭（如果不配置，默认是3秒）//设置后不需要自己写定时关闭了，单位是毫秒
                                    });
                                }
                            }
                        })
                        layer.close(index);
                    });
                } else if(obj.event === 'edit'){ //编辑
                    //do something
                    //同步更新缓存对应的值
                    /*obj.update({
                        username: '123'
                        ,title: 'xxx'
                    });*/
                    $("#div1").show();
                    $.ajax({
                        "url":"selectUserInfoById",
                        "type":"get",
                        "data":{id:data.id},
                        "dataType":"json",
                        "success":function (data) {
                            $("#id").val(data.id);
                            $("#username").val(data.username);
                            $("#password").val(data.password);
                            $("#address").val(data.address);
                            $("#createby").val(data.createby);
                            $("#createdate").val(data.createdate);
                            $("input").attr("readonly",false);
                            $("#btn").show();
                        }
                    })
                }
            });
        });
    </script>
    <div id="div1" hidden>
        <form id="form1">
            <table class="layui-table" id="tb" >
                <tr>
                    <td>
                        ID:<input type="text" id="id" name="id" readonly/>
                    </td>
                </tr>
                <tr>
                    <td>
                        用户名:<input type="text" id="username" name="username" readonly/>
                    </td>
                </tr>
                <tr>
                    <td>
                        密码:<input type="text" id="password" name="password" readonly/>
                    </td>
                </tr>
                <tr>
                    <td>
                        地址:<input type="text" id="address" name="address" readonly/>
                    </td>
                </tr>
                <tr>
                    <td>
                        创建者:<input type="text" id="createby" name="createby" readonly/>
                    </td>
                </tr>
                <tr>
                    <td>
                        创建日期:<input type="text" id="createdate" name="createdate" readonly/>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="button" id="btn" value="修改" class="layui-btn layui-btn-normal" hidden/>
                    </td>
                </tr>
            </table>
        </form>
    </div>
    <script>
        $(function () {
            $("#btn").click(function () {
                var data=$("#form1").serialize();
                $.ajax({
                    "url":"updateInfoById",
                    "type":"get",
                    "data":data,
                    "dataType":"json",
                    "success":function (data) {
                        if(data=="1"){
                            alert(1);
                        }else{
                            alert(-1);
                        }
                    }
                })
            })
            $("#add").click(function () {
                location.href="useradd.html"
            })
        })
    </script>

</body>
</html>